<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>公告发布页面</title>
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/public.css}" media="all">
    <script th:src="@{/layuiadmin/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!--<div id="editor">

</div>-->
<div class="welcome"><p class="font1">欢迎使用 <b class="font2">旅游酒店管理系统</b> 后台公告发布功能</p></div>
<div class="title layui-input-block">
    <label id="label" class="layui-form-label">文章标题:</label>
    <input type="text" id="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" style="width:408px;" class="layui-input">
</div>
<div id="editorBody">

    <!--<div id="toolbar-container" class="toolbar"></div>
    <div id="text-container" class="text"></div>-->

</div>
<div class="myButton"><button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="getJson">更改</button></div>
</body>
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script type="text/javascript">
  var noticeId = parent.noticeId;
  const E = window.wangEditor
  var editor = new E('#editorBody')
  //const editor = new E('#toolbar-container', '#text-container')
  // 或者 const editor = new E(document.getElementById('div1'))
  editor.config.height = 400 //配置高度
  editor.config.zIndex = 500
  editor.config.placeholder = '开始编辑......'
  editor.config.focus = true
  editor.config.showFullScreen = true
  editor.highlight = hljs
  // 配置颜色（文字颜色、背景色）
  editor.config.colors = [
      '#000000',
      '#eeece0',
      '#1c487f',
      '#4d80bf'
  ]
  editor.config.fontNames = [
      // 对象形式 v4.6.16
      {name:"黑体",value:"黑体"},
      {name:"绝绝字体",value:"Times New Roman"},
      // 字符串形式
      '黑体',
      '仿宋',
      '楷体',
      '标楷体',
      '华文仿宋',
      '华文楷体',
      '宋体',
      '微软雅黑',
      'Arial',
      'Tahoma',
      'Verdana',
      'Times New Roman',
      'Courier New',
  ]
  editor.config.fontSizes = {
      'x-small': { name: '10px', value: '1' },
      'small': { name: '13px', value: '2' },
      'normal': { name: '16px', value: '3' },
      'large': { name: '18px', value: '4' },
      'x-large': { name: '24px', value: '5' },
      'xx-large': { name: '32px', value: '6' },
      'xxx-large': { name: '48px', value: '7' },
  }
  const SINA_URL_PATH = 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal'
  editor.config.emotions = [
      {
          title: '新浪', // tab 的标题
          type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
          content: [
              { alt: '[坏笑]', src: `${SINA_URL_PATH}/50/pcmoren_huaixiao_org.png` },
              { alt: '[舔屏]', src: `${SINA_URL_PATH}/40/pcmoren_tian_org.png` },
              { alt: '[污]', src: `${SINA_URL_PATH}/3c/pcmoren_wu_org.png` },
          ]
      },
      {
          title: 'emoji',  // tab 的标题
          type: 'emoji', // 'emoji' / 'image'
          // emoji 表情，content 是一个数组即可
          content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/),
      }
  ]
  //插入代码语言配置
  editor.config.languageType = [
      'Bash',
      'C',
      'C#',
      'C++',
      'CSS',
      'Java',
      'JavaScript',
      'JSON',
      'TypeScript',
      'Plain text',
      'Html',
      'XML',
      'SQL',
      'Go',
      'Kotlin',
      'Lua',
      'Markdown',
      'PHP',
      'Python',
      'Shell Session',
      'Ruby',
  ]
 /* editor.config.customAlert = function (s, t) {
      switch (t) {
          case 'success':
              message.success(s)
              break
          case 'info':
              message.info(s)
              break
          case 'warning':
              message.warning(s)
              break
          case 'error':
              message.error(s)
              break
          default:
              message.info(s)
              break
      }
  }*/
  $(function () {
      $.ajax({
          type: "PUT",
          url: "/notice/findById?id="+noticeId,
          dataType: "json",
          contentType: "application/json;charset=utf-8",
          success: function(result) {
              if(result.code == 200) {
                  $("#title").val(result.data.title)
                  editor.txt.html(result.data.content)
                  layer.msg(result.msg,{icon: 1});
              } else {
                  layer.msg(result.msg, {
                      icon: 5
                  });
              }
          }
      });
  })
  editor.create()

  $("#getJson").click(function () {
      //alert(JSON.stringify(editor.txt.html()))
      var htmlData = JSON.stringify(editor.txt.html());
      var jsonData = JSON.stringify(editor.txt.getJSON());
      var title = $("#title").val();
      //alert(jsonData)
      var parm = {
          "content" : htmlData,
          "title" : title
      }
      $.ajax({
          type: "PUT",
          url: "/notice/editNotice/"+noticeId,
          data: JSON.stringify(parm),
          dataType: "json",
          contentType: "application/json;charset=utf-8",
          success: function(result) {
              if(result.code == 200) {
                  location.reload();
                  layer.msg(result.msg,{icon: 1});
              } else {
                  layer.msg(result.msg, {
                      icon: 5
                  });
              }
          }
      });
  })
</script>
<style>
    .toolbar {
        border: 1px solid #ccc;
        margin-top: 10px;
    }
    .text {
        border: 1px solid #ccc;
        min-height: 400px;
    }
    #editorBody {
       /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;*/
    }

    .welcome {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        font-size: 30px;
        margin-top: 10px;
    }


    .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    #label {
        font-size: 30px;
        width: 150px;
        font-weight: 500;
        font-family: 华文新魏;
    }
    .font1 {
        font-family: 华文行楷;
    }
    .font2 {
        font-family: STCAIYUN;
        color: red;
    }

    .myButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;
    }
</style>
</html>